import Base from "../Base.js";
import moviesApi from "../../api/movies.js";
import config from "../../util/config.js";

export default class extends Base {
  constructor(props) {
    super(props);
    const movies = moviesApi.getStorage();
    this.data = { movies };
  }


  async getMovies() {
    const data = await moviesApi.getOne(this.data.movies._id);
    Object.assign(this.data.movies, data);
    this.renrender();
  };

  mounted() {
    this.getMovies()
  };
  handle() {
    $("#submit").on("click", e => { location.hash = "/info/movies-list" })
  }

  renrender() {
    //渲染电影相关的图片
    $('#filePreview').html(`${this.data.movies.images.map(item =>
      `<img src="${config['resource_sever']}${item}" style="width: 100px;">`).join("")}`);
    //渲染电影海报
    if (this.data.movies.poster) {
      $('#filePoster').html(
        ` <img src="${config['resource_sever']}${this.data.movies.poster}" style="width: 100px;">`)
    }
  };

  render() {

    this.el.html(` <div class="movieDetails">
            <form class="layui-form movieAdd-from" action="#">

            <div style="display: flex;">
               <div style="width: 310px">

                <div class="layui-form-item movieAdd-item">
                <label class="layui-form-label">电影名</label>
                <div class="layui-input-inline">
                  <input type="text" name="cname" lay-verify="required" value="${this.data.movies.cname}" autocomplete="off" class="layui-input" readonly>
                </div>
                 </div>
    
               <div class="layui-form-item movieAdd-item">
               <label class="layui-form-label">英文名</label>
               <div class="layui-input-inline">
                <input type="text" name="ename" lay-verify="required" value="${this.data.movies.ename}" autocomplete="off" class="layui-input" readonly>
               </div>
               </div>
                    <div class="layui-form-item movieAdd-item">
            <label class="layui-form-label">导演名字</label>
            <div class="layui-input-inline">
            <input type="text" name="director" lay-verify="required" value="${this.data.movies.director}" autocomplete="off" class="layui-input" readonly>
            </div>
            </div>
    
            <div class="layui-form-item movieAdd-item">
            <label class="layui-form-label">演员名字</label>
            <div class="layui-input-inline">
            <input type="text" name="actor" lay-verify="required" value="${this.data.movies.actor}" autocomplete="off" class="layui-input" readonly>
            </div>
            </div>
    
            <div class="layui-form-item movieAdd-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
              <input type="text" name="type" lay-verify="required" value="${this.data.movies.type}" autocomplete="off" class="layui-input" readonly>
            </div>
          </div>
    
          <div class="layui-form-item">
                <label class="layui-form-label">是否经典</label>
                <div class="layui-input-block">
                  <input type="radio" name="isClassic" value="true" title="是" checked readonly>
                  <input type="radio" name="isClassic" value="false" title="否" readonly>
                </div>
          </div>

         <div class="layui-form-item movieAdd-item">
         <label class="layui-form-label">电影评分</label>
         <div class="layui-input-inline">
           <input type="number" name="score" lay-verify="required" value="${this.data.movies.score}" autocomplete="off" class="layui-input" readonly>
         </div>
         </div>
         <div class="layui-form-item movieAdd-item">
         <label class="layui-form-label">电影票房</label>
         <div class="layui-input-inline">
           <input type="text" name="count" lay-verify="required" value="${this.data.movies.count}" autocomplete="off" class="layui-input" readonly>
         </div>
         </div>

    
          <div class="layui-form-item movieAdd-item">
          <label class="layui-form-label">电影时长</label>
          <div class="layui-input-inline">
            <input type="number" name="time" lay-verify="required" value="${this.data.movies.time}" autocomplete="off" class="layui-input" readonly>
          </div>
        </div>
    
        <div class="layui-form-item movieAdd-item">
        <label class="layui-form-label">上映时间</label>
        <div class="layui-input-inline">
          <input type="text" name="upDate" lay-verify="required" value="${this.data.movies.upDate}" autocomplete="off" class="layui-input" readonly>
        </div>
      </div>
        <div class="layui-form-item movieAdd-item">
        <label class="layui-form-label">首映地区</label>
        <div class="layui-input-inline">
          <input type="text" name="area" lay-verify="required" value="${this.data.movies.area}" autocomplete="off" class="layui-input" readonly>
        </div>
      </div>
</div>
    <div style="margin-left:35px;width:252px">
    <div class="layui-upload">
      <button type="button" class="layui-btn" id="test1">海报</button>
      <div class="layui-upload-list" id="filePoster" style = "width:100px; height:140px; border: 1px solid #cdcdcd" ></div>
    </div> 

    <div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="test2">相关图片</button> 
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
    
      <div class="layui-upload-list" id="filePreview"></div>
  </blockquote>
  </div> 
</div>  
</div>
      
      <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">剧情简介</label>
      <div class="layui-input-block">
        <textarea name="intro" value="" class="layui-textarea" readonly>${this.data.movies.intro}</textarea>
      </div>
    </div>

    <div class="layui-form-item">
    <div class="layui-input-block">
    <input type="button"  class="layui-btn" id="submit"  value="返回"> 
    </div>
  </div>
        </form>
        </div>   
            `);
      layui.form.render();
    $(".movieDetails").css({
      width: "600px",
      margin: "auto",
      color: "#000",
      backgroundColor: "#fff",
      padding: "20px",
      opacity: "0.7",
    });
    $(".layui-form-item").css({
      marginTop: "5px",
      marginBottom: "0px"
    });
    $("input").css({
      fontSize: "14px",
      height: "30px",
      lineHeight: "30px"
    });
    this.texEles = $(".layui-textarea");//获取剧情简介

  }


}